<template>
  <el-row>
    <el-col :span="12">
      <h3>代办事项(Todo)</h3>
      <draggable tag="ul" :list="doingList" class="list-group" handle=".handle">
        <li
          class="list-group-item"
          v-for="(element, idx) in doingList"
          :key="element.name"
        >
          <i class="fa fa-align-justify handle" @dragend="updateSorts"></i>
          <span class="text">{{ element.sorts }} </span>
          <span class="text">{{ element.createTime }} </span>
          <el-input type="text" class="form-control" v-model="element.name" @focusout="saveOrUpdate(element)"/>
          <i class="fa fa-times close" @click="removeAt(element.id)"></i>
        </li>
      </draggable>
    </el-col>
    <el-col :span="12">
      <h3>已完成(Done)</h3>
      <draggable tag="ul" :list="doneList" class="list-group" handle=".handle">
        <li
          class="list-group-item"
          v-for="(element, idx) in doneList"
          :key="element.name"
        >
          <span class="text">{{ element.updateTime }} </span>
          <span class="text">{{element.name}}</span>
        </li>
      </draggable>
    </el-col>
  </el-row>
</template>
<script>
  import draggable from 'vuedraggable'

  export default {
    name: 'todoList',
    components: {draggable},
    data() {
      return {
        doingList: [],
        doneList: []
      }
    },
    methods: {
      updateDone(element) {
        console.log("更新为已完成", element)
        // updateDone(element);

      },
      updateSorts() {
        console.log("重新排序", this.doingList)
        // updateSorts()

      },
      saveOrUpdate(data) {
        console.log("保存或更新", data)
      },
      removeAt(id) {
        console.log("删除todo", id)
      }
    }
  }
</script>
<style scoped>
  h3 {
    text-align: center;
  }

  .button {
    margin-top: 35px;
  }

  .handle {
    float: left;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .close {
    float: right;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  input {
    display: inline-block;
    width: 50%;
  }

  .text {
    margin: 20px;
  }
</style>
